<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .one {
      line-height: 50px;
    }

    .two {

      /* 背景框 */
      width: 200px;
      height: 150px;
      font-size: 20px;
      background-color: grey;
      color: azure;

      text-align: center;
      line-height: 150px;
    }

    .three {
      /* 设置背景框 宽度高度 颜色*/
      width: 1000px;
      height: 650px;
      background-color: black;

      /* 设置背景图 */
      background-image: url(./czc.png);

      /* 设置背景图片平铺效果 
      repeat-x 水平方向平铺 
      repeat-y 垂直方向平铺
      */
      background-repeat: no-repeat;

      /* 设置背景图位置 */
      background-position: center center;

      /* 设置背景图片大小 */
      background-size: contain;

      /* 设置字体大小和颜色 */
      font-size: 20px;
      color: azure;
    }

    /* body {
      background-image: url(./czc.png);
    } */
  </style>


  <div class="one">上一行</div>
  <div class="two">中间行</div>
  <div class="three">下一行</div>

</body>

</html>